<template>
	<view class="pages column-start" :style="{'background-image': `url(${bgImage})`}">
		<template v-if="Template == 1">
			<view class="form-content">
				<!-- <view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p>详细地址</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入详细地址" v-model="address" />
					</view>
				</view> -->
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系方式</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系人</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList8" :key="index"
							@click="itemClick(item.name,index,checkboxList8)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 2">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系人</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系方式</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList2" :key="index"
							@click="itemClick(item.name,index,checkboxList2)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 3">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p>公司名称</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入公司名称" v-model="company" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系方式</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系人</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList2" :key="index"
							@click="itemClick(item.name,index,checkboxList2)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 4">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p>公司名称</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入公司名称" v-model="company" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系方式</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>联系人</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList2" :key="index"
							@click="itemClick(item.name,index,checkboxList2)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 5">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>姓名</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>电话</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList5" :key="index"
							@click="itemClick(item.name,index,checkboxList5)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 6">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>姓名</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>电话</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList6" :key="index"
							@click="itemClick(item.name,index,checkboxList6)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 7">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>姓名</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>电话</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList7" :key="index"
							@click="itemClick(item.name,index,checkboxList7)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<template v-if="Template == 8">
			<view class="form-content">
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>姓名</p>
					</view>
					<view class="">
						<input type="text" placeholder="请输入联系人姓名" v-model="name" class="item-input" />
					</view>
				</view>
				<view class="form-items">
					<view class="label row" style="margin-top: 20upx">
						<p style="color: #c71d23;">*</p>
						<p>电话</p>
					</view>
					<view class="">
						<input type="number" placeholder="请输入手机号" v-model="phone" class="item-input" />
					</view>
				</view>
				<view class="form-items" style="border-bottom:none;">
					<view class="label row" style="margin-top: 20upx;width: 230upx;">
						<p style="color: #c71d23;">*</p>
						<p>需要材料或服务</p>
					</view>
					<view class="item-name">
						<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" activeColor="#0b3f35" v-for="(item, index) in checkboxList5"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group> -->
						<view :class="['item-btn', item.is ? 'check-item-btn' : '']"
							v-for="(item, index) in checkboxList8" :key="index"
							@click="itemClick(item.name,index,checkboxList8)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="confirm" @click="submitAll">提交</view>
				</view>
			</view>
		</template>
		<!-- <view class="form_bottom_btn">
			<view class="btn-box">
				<view class="confirm" @click="submitAll">提交</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	// import {
	// 	onLoad
	// } from '@dcloudio/uni-app'
	export default {
		name: 'tabPages',
		data() {
			return {
				dataList: [],
				name: '',
				phone: '',
				need: '',
				company: '',
				address: '',
				remark: '',
				need: '',
				checkboxValue1: [],
				checkboxList1: [{
						name: '地面'
					},
					{
						name: '墙面'
					},
					{
						name: '吊顶'
					},
					{
						name: '厨房'
					},
					{
						name: '卫浴'
					},
					{
						name: '其他'
					},
				],
				checkboxList2: [{
						name: '主材'
					},
					{
						name: '分项施工'
					},
					{
						name: '半包装修'
					},
					{
						name: '局部改造'
					},
					{
						name: '铺材'
					},
					{
						name: '家庭装修'
					},
					{
						name: '全包装修'
					},
					{
						name: '其他'
					}
				],
				checkboxList5: [{
						name: '门',
						is: false,
					},
					{
						name: '墙板',
						is: false,
					},
					{
						name: '设计',
						is: false,
					},
					{
						name: '柜',
						is: false,
					},
					{
						name: '吊顶',
						is: false,
					},
					{
						name: '其他',
						is: false,
					}
				],
				checkboxList6: [{
						name: '房门',
						is: false,
					},
					{
						name: '阳台窗',
						is: false,
					},
					{
						name: '五金件',
						is: false,
					},
					{
						name: '柜门',
						is: false,
					},
					{
						name: '推拉门',
						is: false,
					},
					{
						name: '其他',
						is: false,
					}
				],
				checkboxList7: [{
						name: '水电',
						is: false,
					},
					{
						name: '墙面',
						is: false,
					},
					{
						name: '家具',
						is: false,
					},
					{
						name: '五金件',
						is: false,
					},
					{
						name: '地面',
						is: false,
					},
					{
						name: '吊顶',
						is: false,
					},
					{
						name: '门窗',
						is: false,
					},
					{
						name: '其他',
						is: false,
					}
				],
				checkboxList8: [{
						name: '主材',
						is: false,
					},
					{
						name: '工地补货',
						is: false,
					},
					{
						name: '专项施工人员',
						is: false,
					},
					{
						name: '设计服务',
						is: false,
					},
					{
						name: '辅材',
						is: false,
					},
					{
						name: '点工杂工',
						is: false,
					},
					{
						name: '专项施工服务',
						is: false,
					},
					{
						name: '其他',
						is: false,
					}
				]
			}
		},
		props: {
			Template: {
				type: [String, Number],
				default: 0
			},
			Type: {
				type: [Number],
				default: 0
			},
			bgImage: {
				type: String,
				default: '',
			}
		},
		methods: {
			checkboxChange(e) {
				console.log(e)
				this.need = e.join(',')
			},
			async submitAll() {
				const data = {
					name: this.name,
					phone: this.phone,
					need: this.need,
					company: this.company,
					address: this.address,
					remark: this.remark,
					type: this.Type
				}
				console.log(data)
				if (this.need == '') {
					uni.showToast({
						icon: 'none',
						title: '请勾选服务项'
					})
				} else if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系方式'
					})
				} else if (this.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人姓名'
					})
				} else {
					const res = await this.$POST('/system/consult', data)
					if (res.code == 200) {
						console.log('提交结果-->', res)
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index'
							})
						}, 2000)
					}
				}
			},

			itemClick(name, index, checkboxList) {
				console.log(888, name, index, checkboxList)
				let checkIndex = this.checkboxValue1.indexOf(name)
				if (checkIndex !== -1) {
					this.checkboxValue1.splice(checkIndex, 1)
					checkboxList[index].is = false
				} else {
					this.checkboxValue1.push(name)
					checkboxList[index].is = true
				}
				this.need = this.checkboxValue1.join(',')
			}
		},
	}
</script>
<style lang="scss" scoped>
	::v-deep .u-checkbox-group--row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pages {
		width: 100vw;
		height: 100vh;
		position: relative;
		background-color: #0b3f35;
		background-repeat: no-repeat;
		background-size: 100% 32vh;
		top: 0;
		left: 0;
	}

	.area-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.form-content {
		width: 90vw;
		padding: 20upx;

		.form-items {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			// min-height: 120upx;

			.item-name {
				display: flex;
				flex-wrap: wrap;

				.item-btn {
					margin-right: 20rpx;
					margin-top: 10upx;
					background-color: #f2f2f2;
					// height:80upx;
					// line-height: 80upx;
					border-radius: 50upx;
					padding: 12upx 24upx;
					min-width: 152upx;
					text-align: center;
					line-height: 100%;
				}

				.check-item-btn {
					background-color: #0b3f35;
					color: #fff;
				}
			}

			.item-input {
				border-radius: 10rpx;
				background-color: #F2F2F2;
				height: 60upx;
			}
		}

		.btn-box {
			width: 100%;
			height: 64px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 100upx;

			.cancel {
				width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 45rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
			}

			.confirm {
				width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 45rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #FFFFFF;
				background: #0b3f35;
			}
		}
	}

	.checkItem {
		margin-right: 20upx;
	}

	.label {
		width: 200upx;
		font-size: 30upx;
		font-weight: 600;
		margin-bottom: 10rpx
	}

	.row {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
</style>